<template>
  <section class="data-screen-rg">
    <div class="scroll_auto">
      <!-- top -->
      <div class="data-screen-top">
        <div class="data-screen-main-title">
          <span>投诉信息</span>
        </div>
        <border-box-13 class="data-screen-main-cont">
          <!-- <Decoration1 :color="['pink', 'yellow']" style="width:200px;height:50px;" /> -->
          <ScrollBoard :config="complainConfig" style="width:500px;height:220px" @mouseover="mouseoverHandler"
            @click="clickHandler" />
        </border-box-13>
      </div>

      <!-- center -->
      <div class="data-screen-center">
        <div class="data-screen-main-title">
          <span>故障工单情况统计</span>
        </div>
        <border-box-13 class="data-screen-main-cont">
          <right-chart-1 ref="refRightChart1" :chart-data="rightChart1Data" />
        </border-box-13>
      </div>
      <!-- <div class="data-screen-center">
      <div class="data-screen-main-title">
        <span>故障工单情况统计</span>
        <img src="../images/data-screen-title.png" alt="" />
      </div>
      <div class="data-screen-main-chart">
        <right-chart-1 ref="refRightChart1" :chart-data="rightChart1Data" />
      </div>
    </div> -->

      <!-- bottom -->
      <div class="data-screen-bottom">
        <div class="data-screen-main-title">
          <span>维护关键指标统计</span>
        </div>
        <border-box-13 class="data-screen-main-cont">
          <right-chart-2 ref="refRightChart2" :chart-data="rightChart2Data" />
        </border-box-13>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import RightChart1 from '../components/chart/RightChart1.vue'
import RightChart2 from '../components/chart/RightChart2.vue'
// datav
import { BorderBox10, BorderBox13, ScrollBoard } from '@kjgl77/datav-vue3'
// api相关
import { apiCommon } from '@/utils/index.js'
import * as screenApi from "@/api/screen/screen";

const refRightChart1 = ref(null)
const refRightChart2 = ref(null)

const rightChart1Data = ref({})
const rightChart2Data = ref({})

const complainConfig = ref({})

// 接口测试
const apiTest = async () => {
  let params = {}
  const testData = await apiCommon(screenApi.getInfo, params)
  console.log(testData)
}
// apiTest()

const mouseoverHandler = (e) => {
  console.log(e)
}

const clickHandler = (e) => {
  console.log(e)
}

// 需要点击加载某个图表时 - 点击事件
const resetChart = () => {
  /* refLeftChart1.value.resetChart()
  refLeftChart2.value.resetChart() */
}

// 获取投诉信息
const getComplainData = () => {
  complainConfig.value = {
    header: ['列1', '列2', '列3'],
    data: [
      ['行1列1', '行1列2', '行1列3'],
      ['行2列1', '行2列2', '行2列3'],
      ['行3列1', '行3列2', '行3列3'],
      ['行4列1', '行4列2', '行4列3'],
      ['行5列1', '行5列2', '行5列3'],
      ['行6列1', '行6列2', '行6列3'],
      ['行7列1', '行7列2', '行7列3'],
      ['行8列1', '行8列2', '行8列3'],
      ['行9列1', '行9列2', '行9列3'],
      ['行10列1', '行10列2', '行10列3'],
    ],
    index: true,
    columnWidth: [50],
    align: ['center'],
  }
}

// RightChart1
const getRightChart1Data = () => {
  // 获取接口数据接口
  // ......

  // 图表赋值
  rightChart1Data.value = {
    fieldData: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'],
    yData: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400]
  }
}

// RightChart2
const getRightChart2Data = () => {
  // 获取接口数据接口
  // ......

  // 图表赋值
  rightChart2Data.value = {
    fieldData: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
    yData1: [18203, 23489, 29034, 104970, 131744, 630230],
    yData2: [19325, 23438, 31000, 121594, 134141, 681807]
  }
}

// 初始化图表数据
const initChartData = () => {
  getComplainData()
  getRightChart1Data()
  getRightChart2Data()
}
initChartData()
</script>

<style lang="scss" scoped>
.data-screen-lf {
  /* display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 394px;
  // height: 100%;
  margin-right: 40px; */

  /* .data-screen-top,
  .data-screen-center,
  .data-screen-bottom {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding-top: 54px;
  }

  .data-screen-top {
    height: 37%;
    // background: url("../images/data-screen-main-lt.png") no-repeat;
    background-size: 100% 100%;
  }

  .data-screen-center {
    height: 30%;
    background: url("../images/data-screen-main-lc.png") no-repeat;
    background-size: 100% 100%;
  }

  .data-screen-bottom {
    height: 27%;
    margin-bottom: 0;
    background: url("../images/data-screen-main-lb.png") no-repeat;
    background-size: 100% 100%;
  } */
}
</style>